<template>
    <div class="app-container">
      <el-row :gutter="20">
        <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
          <pane size="16">
        <!-- <el-col :span="4" :xs="24"> -->
        <el-col>
          <div class="search-container">
            <el-input
              placeholder="搜索节点"
              v-model="searchQuery"
              clearable
              @input="handleSearch"
            />
            <!-- 竖线 -->
            <!-- <div class="vertical-line"></div> -->
          </div>
          <div class="head-container">
          <el-tree
            :data="parentAccountName"
            :props="defaultProps"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
          </div>
        </el-col>
    </pane>
        <!-- <el-col :span="20" :xs="24"> -->
          <pane size="84">
        <el-col>
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="港口编号" prop="港口编号">
              <el-input
                v-model="queryParams.编号"
                placeholder="请输入港口编号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="港口名称" prop="港口名称">
              <el-input
                v-model="queryParams.港口名称"
                placeholder="港口名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="国家名称" prop="国家名称">
              <el-input
                v-model="queryParams.国家名称"
                placeholder="国家名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col> -->
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>
          
          <el-table :data="tableData"  v-loading="loading" :row-class-name="rowClassName"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column  prop="港口编号" align="center" label="港口编号" />
            <el-table-column  prop="港口名称" align="center" label="港口名称"/>
            <el-table-column  prop="英文名称" align="center" label="英文名称"/>
            <el-table-column  prop="国家编号" align="center" label="国家编号"/>
            <el-table-column  prop="国家名称" align="center" label="国家名称"/>
            <el-table-column label="操作" align="center" width="150px" fixed="right">
            <template slot-scope="scope">
                 <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                 <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
            </el-table-column>
          </el-table>
        </el-col>
        </pane>
    </splitpanes> 
  </el-row>
          <el-dialog title="编辑" :visible.sync="open" width="30%" center>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-form-item label="港口编号" prop="港口编号">
                <el-input v-model="form.港口编号" placeholder="请输入港口编号"></el-input>
              </el-form-item>
              <el-form-item label="港口名称" prop="港口编号">
                <el-input v-model="form.港口编号" placeholder="请输入港口编号"></el-input>
              </el-form-item>
              <el-form-item label="英文名称" prop="英文名称">
                <el-input v-model="form.英文名称" placeholder="请输入英文名称"></el-input>
              </el-form-item>
              <el-form-item label="国家编号" prop="国家编号">
                <el-input v-model="form.国家编号" placeholder="请输入国家编号"></el-input>
              </el-form-item>
              <el-form-item label="国家名称" prop="国家名称">
                <el-input v-model="form.国家名称" placeholder="请输入国家名称"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>
    </div>
  </template>
  
   <script>
   import ImageUpload from '@/components/ImageUpload'
   import { Splitpanes, Pane } from "splitpanes";
   import "splitpanes/dist/splitpanes.css";
   export default{
    components: { Splitpanes, Pane },
    data() {
      return {
        title:null,
      // 总条数
      total:0,
      // 打开弹出框
      open:false,
      // 表格
      form:{},
      // 校验
      rules:{},
        parentAccountName:[{
          label:'所有国家',
          children:[{
            label: '意大利',
          },{
            label: '冰岛',
          },{
            label: '印度',
          },{
            label: '印度尼西亚',
          },{
            label: '伊朗',
          },{
            label: '伊拉克',
          },
          {
            label: '阿根廷',
          },]   
      }],
        defaultProps: {
            children: 'children',
            label: 'label'
        },
        queryParams:{
          
        },
        showSearch: true,
        single: false,
        multiple: false,
        tableData:[{
        港口编号: '12345',
        港口名称: '克努托内',
        英文名称: 'Crotone',
        国家编号: '107',
        国家名称: '意大利'
      },
      {
        港口编号: '67890',
        港口名称: '杰拉',
        英文名称: 'Gela',
        国家编号: '107',
        国家名称: '意大利'
      },
      {
        港口编号: '11223',
        港口名称: '热那亚',
        英文名称: 'Genoa',
        国家编号: '107',
        国家名称: '意大利'
      }],
      
      }
    },
    methods: {
      //显示高亮
        rowClassName({ row }) {
          return row.港口编号 === this.港口编号 ? 'selected-row' : ''; // 判断是否选中
        },
      filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },

        submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
        handleAdd() {
          this.title = '新增'
          this.open = true;
          this.isEdit = false;
        },
        handleUpdate(row) {
          this.title = '修改'
          this.open = true;
          this.isEdit = false;
          this.form = row;
        },
        handleDelete(){},
        handleExport(){},
        handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
    },
    
   }
   </script>

<style scoped>
.head-container {
  position: relative;
}
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
 
.search-container {
  display: flex;
  align-items: center;
  width: 100%; /* 使搜索框宽度与父容器一致 */
  margin-bottom: 10px; /* 可根据需要调整 */
}
 
.search-container .el-input {
  flex: 1; /* 使输入框占满剩余空间 */
}
 
.vertical-line {
  width: 2px; /* 竖线宽度 */
  height: 100%; /* 高度与输入框一致 */
  background-color: #ccc; /* 竖线颜色 */
  margin-left: 10px; /* 与输入框的间距 */
}
 
/* 其他样式... */
</style>
